<template>
	<!-- 商学院 -->
	<view class="wrap" style="padding-bottom:220rpx;">		
		<!-- 顶部导航栏 -->
		<view  class="topbox mar-top-30">		
			<!-- 搜索框 -->
			<view class="input-box" @click="Tosearch">
				<input class="s-txt" type="text" placeholder="请输入关键字进行搜索"/>
				<view class="icon search">
					<image src="https://web.suqzp.com/public/search.png"></image>
				</view>
			</view>			
		</view>			
		<!-- 轮播图 -->
		<view class="swiper-view mar-top-30">
			<swiper class="swiper" autoplay="true" :current="current" @change="swiperChange">
				<swiper-item v-for="(swiper, index) in swiperList" :key="index">
					<image mode="aspectFill" :src="swiper.img"></image>
				</swiper-item>
			</swiper>			
		</view>
		<view class="follow-wap flex jcsb">
			<view class="flow-item" v-for="(item, index) in collegeList" :key="index">
				<view class="f-img">
					<image :src="item.logo"></image>
				</view>				
				<view class="fs-26 fc-00 text-tc">{{item.organizationName}}</view>
				<view class="fs-24 fc-66 text-tc">{{item.fansList.length || 0 }}粉丝</view>
				<view class="flow-btn fs-26 fc-ff" v-if="!item.isFans" @click="follow(item)">关注</view>
				<view class="flow-btn fs-26 fc-ff bg-F2" v-else @click.stop="unfollow(item)">已关注</view>
			</view>
			<!-- <view class="flow-item">
				<view class="f-img">
					<image src="https://web.suqzp.com/public/goods/p3.jpg"></image>
				</view>				
				<view class="fs-26 fc-00 text-tc">成人教育</view>
				<view class="fs-24 fc-66 text-tc">20632 粉丝</view>
				<view class="flow-btn fs-26 fc-ff">关注</view>
			</view>
			<view class="flow-item">
				<view class="f-img">
					<image src="https://web.suqzp.com/public/goods/p3.jpg"></image>
				</view>				
				<view class="fs-26 fc-00 text-tc">成人教育</view>
				<view class="fs-24 fc-66 text-tc">20632 粉丝</view>				
				<view class="flow-btn fs-26 fc-ff bg-F2">已关注</view>
			</view>
			<view class="flow-item">
				<view class="f-img">
					<image src="https://web.suqzp.com/public/img/goods/p3.jpg"></image>
				</view>				
				<view class="fs-26 fc-00 text-tc">成人教育</view>
				<view class="fs-24 fc-66 text-tc">20632 粉丝</view>				
				<view class="flow-btn fs-26 fc-ff bg-F2">已关注</view>
			</view>	 -->
		</view>
		<!-- 分类 -->		
		<view class="category flex mar-top-30">
			<view class="icon" v-for="(item,index) in categoryList" :key="index">
				<image mode="widthFix" :src="item.img"></image>
				<view>{{ item.name }}</view>
			</view>
		</view>		
		<view class="content-wap flex jcsb">
			<view class="c-list" v-for="(item,index) in waplist" :key="index">
				<view class="img1">
					<image :src="item.img"></image>
				</view>	
				<view class="fs-26 fc-33 one-ellipsis w-280">{{item.name}}</view>
				<view class="bot-box flex">
					<image class="img2" src="https://web.suqzp.com/public/img/goods/p2.jpg"></image>
					<view class="mar-left-15 fc-66 fs-26 mar-top-20">小妖</view>
				</view>
			</view>
		</view>
		<!-- <view class="release-but" @click="ToAuthent">
			<image src="https://web.suqzp.com/public/add.png"></image>
		</view> -->
	</view>	
</template>

<script>
//高德SDK
//import  from '';
import { mapState } from 'vuex'
export default {
	data() {
		return {
			// 轮播图片
			swiperList: [
				{ id: 1, src: 'url1', img:this.$mConfig.imgSrcUrl+ 'xy.png' }
			],
			current: 0,
			swiperCurrent: 0,	
			// 商学院
			collegeList:[],
			// 分类菜单
			categoryList: [				
				{ id: 1, name: '社会百态', img: this.$mConfig.imgSrcUrl+'s1-icon.png' },
				{ id: 2, name: '生活百科', img: this.$mConfig.imgSrcUrl+'s2-icon.png' },
				{ id: 3, name: '人文科技', img: this.$mConfig.imgSrcUrl+'s3-icon.png' },
				{ id: 4, name: '文史地理', img: this.$mConfig.imgSrcUrl+'s4-icon.png' }
			],
			waplist:[
				{name:'视频社会百态社会百态社会百态社会百态社会百态',img: this.$mConfig.imgSrcUrl+'q.jpg'},
				{name:'视频',img:this.$mConfig.imgSrcUrl+ 'q.jpg'},
				{name:'视频社会百态社会百态社会百态社会百态社会百态',img: this.$mConfig.imgSrcUrl+'q.jpg'},
				{name:'视频',img: this.$mConfig.imgSrcUrl+'q.jpg'}
			]
			
		}
	},
	computed: {
		...mapState(['userInfo'])
	},
	onLoad() {
		this.getCollege()
		this.getCategory()
	},
	methods: {		
		//轮播图指示器
		swiperChange (e) {
			this.swiperCurrent = e.detail.current
		},
		// 关注
		follow(item) {
			uni.showLoading({
				mask: true
			})
			var param = {
				collegeId: item.id,
				collegeFollowId: this.userInfo.id
			}
			this.$apis.focusFollow(param).then(res => {
				uni.hideLoading()
				uni.showToast({
					icon:"none",
					title:'关注成功'
				})
				this.getCollege()
			}).catch(e=>{
				uni.hideLoading()
			})
		},
		// 取消关注
		unfollow(item) {
			uni.showLoading({
				mask: true
			})
			var param = {
				collegeId: item.id,
				collegeFollowId: this.userInfo.id
			}
			this.$apis.unFollow(param).then(res => {
				uni.hideLoading()
				uni.showToast({
					icon:"none",
					title:'取消关注成功'
				})
				this.getCollege()
			}).catch(e=>{
				uni.hideLoading()
			})
		},
		// 获取商学院信息
		getCollege() {
			if(!this.userInfo || !this.userInfo.id) {
				uni.showToast({
					icon:'none',
					title:'用户登录已过期，请重新登录后查看~'
				})
				this.$store.dispatch('reLogin');
				return;
			}
			uni.showLoading({
				mask: true
			})
			var param = {
				// 审核状态通过
			}
			this.$apis.getCollegeList(param)
			.then(res=>{
				this.collegeList = res.rows;
				this.collegeList.map(d=> {
					// 默认未关注
					d.isFans = false;
					var wxUserIds = [];
					if(d.fansList) {
						wxUserIds = d.fansList.map(l=>l.collegeFollowId);
					}
					// 表示用户关注了
					if(wxUserIds && wxUserIds.length > 0 && wxUserIds.indexOf(this.userInfo.id) != -1) {
						d.isFans = true;
					}
					return d;
				})
				uni.hideLoading()
				console.log("college:",this.collegeList)
			}).catch(e=>{
				uni.hideLoading()
			})
		},
		// 获取类别
		getCategory() {
			this.$apis.getCategoryList().then(res => {
				res.data.forEach((item,index) => {
					item.img = this.$mConfig.imgSrcUrl + `s${index % 4 + 1}-icon.png`
				})
				this.categoryList = res.data
				console.log('this.categoryList',this.categoryList)
			})
		},
		Tosearch(){
			uni.navigateTo({
				url:"search"
			})
		},
		ToAuthent(){
			uni.navigateTo({
				url:"authent"
			})
		}
	}
};
</script>
<style lang="scss">
	page{position: relative;background-color: #f8f8f8;}
	.topbox {			
		.input-box {
			width: 100%;
			height: 80rpx;
			background-color: #f5f5f5;
			position: relative;
			display: flex;
			align-items: center;
			flex: 1;
			border-radius: 100rpx;
			.s-txt{				
				font-size: 28rpx;
				color: #999;
				width: 100%;
			}
			.icon {
				display: flex;
				align-items: center;
				position: absolute;
				top:28rpx;
				left: 32rpx;
				image{
					width: 30rpx;
					height: 30rpx;
					display: inline-block;
					display: flex;
					align-items: center;
				}
			}
			input {
				padding-left:72rpx;
				height: 28rpx;
				font-size: 28rpx;
			}
		}	
	}
	/* 轮播 */
	.swiper-view {
		position: relative;
		.swiper {
			width: 100%;
			height: 276rpx;
			image {
				width: 100%;
				height: 276rpx;
				border-radius: 14rpx;
			}
		}
		.dot-s{
			position: absolute;
			bottom: 10rpx;
			display: flex;
			justify-content: center;
			height: 15upx;
			width: 100%;
			.baner-dian{
				width: 12rpx;
				height: 8rpx;
				background-color: #fff;
				border-radius: 22rpx;
				margin:0 4rpx;
				&.on {
					width: 30rpx;
					background-color:#84C0F4;
				}
			}
		}
	}
	.follow-wap{
		margin-top: 40rpx;
		.flow-item{
			width: 212rpx;
			height: 276rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 6rpx 8rpx 2rpx rgba(0, 0, 0, 0.050980392156862744);
			border-radius:8rpx;
			.f-img{
				width: 80rpx;
				height: 80rpx;
				margin:28rpx auto;
				display: flex;
				align-items: center;
				overflow: hidden;
				image{
					width: 100%;
				}
			}
			.flow-btn{
				width: 134rpx;
				height: 46rpx;
				background: #84C0F4;
				border-radius: 26rpx;
				line-height: 46rpx;
				text-align: center;
				display: block;
				margin: 10rpx auto;
			}
			.bg-F2{
				background: #F2F9FE;
				color: #4EA6F2;
			}
		}
	}
	/* 分类 */
	.category-list {
		width: 100%;
		height: 176rpx;
		background: #FFFFFF;
		box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.050980392156862744);
		border-radius: 14rpx;
		.dots {
			display: flex;
			justify-content: center;
			height: 15upx;
			width: 100%;
			view{
				width: 12rpx;
				height: 8rpx;
				background-color: rgba(0, 0, 0, 0.2);
				border-radius: 22rpx;
				margin:0 4rpx;
				&.active {
					width: 30rpx;
					background-color:#84C0F4;
				}
			}
		}
	}
	.category {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: flex-start;
		padding: 30rpx 0;
		flex-flow: wrap;
		background: #FFFFFF;
		box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.050980392156862744);
		border-radius: 14rpx;
		.icon {
			width: 25%;
			display: flex;
			flex-flow: wrap;
			justify-content: center;
			font-size: 22upx;
			color: #666;
			margin-bottom: 20rpx;
			image {
				width: 95rpx;
				height: 95rpx;
			}				
		}
	}
	.content-wap{
		margin-top: 30rpx;
		.c-list{			
			height:336rpx;
			background: #FFFFFF;
			border-radius: 8rpx;			
			padding: 24rpx;
			margin-bottom: 18px;
			.img1{				
				width: 284rpx;
				height: 230rpx;
				border-radius: 8rpx;
				display: flex;
				flex-flow: wrap;
				justify-content: center;
				margin-bottom: 24rpx;
				image{
					width: 100%;
					border-radius: 8rpx;
				}
			}
			.w-280{
				width: 280rpx;
			}
			.bot-box{
				.img2{
					margin-top: 20rpx;
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					display: block;
				}
			}
		}
	}
	.release-but{
		width: 156rpx;
		height: 156rpx;
		display: block;
		position: fixed;
		bottom:20%;
		right: 0;
		image{
			width: 156rpx;
			height: 156rpx;
			display: block;
		}
	}
	
</style>
